<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>

  <script>
		window.onload=function(){
			let cans=document.getElementById('cans');

			let cs=cans.getContext('2d');
			let rx=-100,ry=-100,rrx=200,rry=200;

			function todeg(n){
				return n*Math.PI/180;
			}
			function toang(n){
				return n/180/Math.PI;
			}

			cs.strokeRect(rx+100,ry+100,rrx,rry);
				cs.translate(200,200);
				cs.rotate(todeg(20))


				cs.fillStyle='lightblue';
				cs.fillRect(0,0,cans.width,cans.height)


				cs.strokeRect(rx,ry,rrx,rry);














				// cs.strokeRect(rx,ry,rrx,rry);
				// cans.onmousemove=function(ev){
				// 	// cs.clearRect(0,0,cans.width,cans.height)
				// 	if(ev.offsetX>rx&&ev.offsetX<rx+rrx&&ev.offsetY>ry&&ev.offsetY<ry+rry){
				// 		cs.strokeStyle='red';	
				// 		cs.strokeRect(rx,ry,rrx,rry);
				// 	}else{
				// 		cs.strokeStyle='blue';	
				// 		cs.strokeRect(rx,ry,rrx,rry);
				// 	}
				// }

		}
  </script>
</body>
</html>
